﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta><style>/*<![CDATA[*/

table{border: 1px solid gray;}
td{border: 1px dotted gray;}
p{margin: 3px 0 3px 0; padding: 0;}
#ID_Footer{font-size: small; font-style: italic; text-align: right; margin-top: 4em; padding-top: 4px; border-top: 2px solid gray;}

/*]]>*/</style><title>第12章 文本</title></head><body>
<div><br /></div>
<div style="text-align: center"><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">第</span><span style="font-family: Calibri; font-size: 30pt; padding-left: 77pt; line-height: 280%">12</span><span style="font-family: 宋体; font-size: 30pt; padding-left: 77pt; line-height: 280%">章 &nbsp; &nbsp; &nbsp; &nbsp;文本</span></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; padding-left: 18pt; line-height: 240%">1. &nbsp; &nbsp; &nbsp; &nbsp;概念</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">2</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">类属性：外观</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">&amp;</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">格式</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (p254)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">3</span><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">种字体：</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">SERIF, SANS-SERIF, MONOSPACE (p256)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">字体堆栈</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p258)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">通用字体名</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p259)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">字体选用技术</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p260)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">字体刻度</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p264)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">字体大小单位</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%"> (p265)</span></div>
<div><span style="font-family: 宋体; font-size: 12pt; line-height: 240%">字体格式：</span><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">eot, woff, ttf/otf, svg (p267)</span></div>
<div><br /></div>
<div><span style="font-family: 微软雅黑; font-size: 16pt; font-weight: bold; padding-left: 18pt; line-height: 240%">2. &nbsp; &nbsp; &nbsp; &nbsp;属性</span></div>
<div><span style="font-family: 宋体; font-size: 16pt; line-height: 190%">字体外观</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 190%">font-family</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，字体选用，可选用多个字体，用</span><span style="font-family: 宋体; font-size: 12pt; font-weight: bold; color: #c00000; line-height: 190%">逗号</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">分隔</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (p262)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">font-size</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，字体大小，像素、百分数、</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">EM</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (p263)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #ff0000; line-height: 190%">@font-face</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">选择器，指定字体下载地址</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (p266)</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 10pt; line-height: 190%">font-family</span><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">属性，值</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">&apos;ChunkFiveRegular&apos;</span><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">，选定字体名称，可供其余代码使用</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">.</span></div>
<div><span style="font-family: Times New Roman; font-size: 11pt; padding-left: 10pt; line-height: 190%"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-family: Times New Roman; font-size: 11pt; color: #7030a0; padding-left: 10pt; line-height: 190%">src</span><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">属性，值</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">url(&apos;fonts/chunkfive.eot&apos;), </span><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">下载地址；使用多个</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">src</span><span style="font-family: 宋体; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%">来指定不同版本的字体路径</span><span style="font-family: Times New Roman; font-size: 11pt; color: #000000; padding-left: 10pt; line-height: 190%"> (p266-267)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">font-weight</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，粗体，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">normal, bold</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">) (p268)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">font-style</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，斜体，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">normal, italic, oblique</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">) (p269)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">text-transform</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">属性，大小写，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%"> (</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 190%">uppercase, lowercase, capitalize</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">) (p270)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 240%">text-decoration</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">属性，下划线和删除线，值</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%"> (</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">none</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">underline</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">overline</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">line-through</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 240%">blink</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 240%">) (p271)</span></div>
<div><span style="font-family: 宋体; font-size: 16pt; font-weight: bold">字体格式</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 160%">line-height</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，行间距或行高，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">leading=line-height - fontsize (p272)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">letter-spacing</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，字母间距</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p273)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">word-spacing</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，单词间距，值会加到默认单词间距上</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p273)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">text-align</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">left</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">right</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">justify</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">center</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p274)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">vertical-align</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，</span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">baseline</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">sub</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">super</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">top</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">text-top</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">middle</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">bottom</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">, </span><span style="font-family: Times New Roman; font-size: 12pt; color: #c00000; line-height: 160%">text-bottom</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p275)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 160%">text-indent</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，缩进</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%"> (p276)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 160%">text-shadow</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">属性，投影，值（右延伸，下延伸，模糊度</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">-</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 160%">可省略，颜色）</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 160%">(p277)</span></div>
<div><span style="font-family: 宋体; font-size: 16pt; line-height: 190%">伪元素 </span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 190%">:first-letter</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">:first-line</span></div>
<div><span style="font-family: 宋体; font-size: 16pt; line-height: 190%">伪类 </span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 190%">:link</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，尚未访问过的链接</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 190%">:visited</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，已经单击过的链接</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 190%">:hover</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，悬停时的属性</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">:focus</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，拥有焦点时生效</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; line-height: 240%">:active</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 240%">，操作时生效</span></div>
<div><span style="font-family: 宋体; font-size: 16pt; font-weight: bold; line-height: 190%">特性选择器 (p281)</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; color: #7030a0; line-height: 190%">[]</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">匹配某种特性，与特性值无关。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[class]</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，匹配含</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">class</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">的所有</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">p</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">元素</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">[=]</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">匹配特定的特性值。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[class=&quot;dog&quot;]</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">[~=]</span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">，匹配特定特性中的一个。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[class~=&quot;dog&quot;]</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">[^=]</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">匹配某个特定字符串开头的特性值。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[attr^=&quot;d&quot;]</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">[*=]</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">匹配特性值中含有字符串的特性。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[attr*=&quot;do&quot;]</span></div>
<div><span style="font-family: Times New Roman; font-size: 12pt; font-weight: bold; color: #7030a0; line-height: 190%">[$=]</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">, </span><span style="font-family: 宋体; font-size: 12pt; color: #000000; line-height: 190%">匹配特性值中以字符串结尾的特性。</span><span style="font-family: Times New Roman; font-size: 12pt; color: #000000; line-height: 190%">e.g., p[attr$=&quot;d&quot;]</span></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div>
<div><br /></div><script type="text/javascript" language="javascript" src="jquery.js"></script><script type="text/javascript" language="javascript" src="itemlink.js"></script></body></html>